<template>
	<div class="result-container">
		<div class="title-wrap">
			<h2 class="title">{{$route.query.q}}</h2>
			<span class="sub-title">找到{{count}}个结果</span>
		</div>
		<el-tabs v-model="activeIndex">
			<el-tab-pane label="歌曲" name="songs">
				<table class="el-table">
					<thead>
						<th></th>
						<th>音乐标题</th>
						<th>歌手</th>
						<th>专辑</th>
						<th>时长</th>
					</thead>
					<tbody>
						<tr class="el-table__row" v-for="(item,index) in songList" :key="index" @dblclick="playMusic(item.id)">
							<td>{{index+1}}</td>
							<td>
								<div class="song-wrap">
									<div class="name-wrap">
										<span>{{item.name}}</span>
										<span class="iconfont icon-mv" v-if="item.mvid!=0"></span>
									</div>
									<span v-if="item.alias.length!=0">{{item.alias[0]}}</span>
								</div>
							</td>
							<td>{{item.artists[0].name}}</td>
							<td>{{item.album.name}}</td>
							<td>{{item.duration}}</td>
						</tr>

					</tbody>
				</table>
			</el-tab-pane>
			<el-tab-pane label="歌单" name="lists">
				<div class="items">
					<div class="item" v-for="(item,index) in playList" :key="index" @click="toplaylist(item.id)">
						<div class="img-wrap">
							<div class="num-wrap">
								播放量:
								<span class="num">{{item.playCount}}</span>
							</div>
							<img :src="item.coverImgUrl" alt="" />
							<span class="iconfont icon-play"></span>
						</div>
						<p class="name">{{item.name}}</p>
					</div>
				</div>
			</el-tab-pane>
			<el-tab-pane label="MV" name="mv">
				<div class="items mv">
					<div class="item" v-for="(item,index) in mv" :key="index" @click="toMV(item.id)">
						<div class="img-wrap">
							<img :src="item.cover" alt="" />
							<span class="iconfont icon-play"></span>
							<div class="num-wrap">
								<div class="iconfont icon-play"></div>
								<div class="num">{{item.playCount}}</div>
							</div>
							<span class="time">{{item.duration}}</span>
						</div>
						<div class="info-wrap">
							<div class="name">{{item.name}}</div>
							<div class="singer">{{item.artistName}}</div>
						</div>
					</div>
				</div>
			</el-tab-pane>
		</el-tabs>
	</div>
</template>

<script>
	//导入axios实例
	import { request } from '../network/request.js'
	export default {
		name: 'result',
		data() {
			return {
				activeIndex: 'songs',
				page: 1,
				songList: [],
				playList: [],
				count: 0,
				mv: []
			}
		},
		watch: {
			activeIndex() {
				//songs
				//lists
				//mv

				let type = 1;
				switch (this.activeIndex) {
					case 'songs':
						type = 1;
						break;
					case 'lists':
						type = 1000;
						break;
					case 'mv':
						type = 1004;
						break;
					default:
						break;

				};

				request({
					url: "/search",
					method: "get",
					params: {
						keywords: this.$route.query.q,
						type: type,
						limit: 20,
						offset: (this.page - 1) * 30,

					}
				}).then(res => {

					if (type == 1) {
						// console.log(res);
						this.songList = res.result.songs;
						//计算歌曲时间
						for (let i = 0; i < this.songList.length; i++) {
							let min = parseInt(this.songList[i].duration / 1000 / 60);
							let sec = parseInt(this.songList[i].duration / 1000 % 60);
							// console.log(min+":"+sec);
							if (min < 10) {
								min = "0" + min
							};
							if (sec < 10) {
								sec = "0" + sec
							};
							this.songList[i].duration = `${min}:${sec}`;
							this.count = res.result.songCount
						}
					} else if (type == 1000) {
						// console.log(res);
						this.playList = res.result.playlists;
						this.count = res.result.playlistCount;
					} else {
						// console.log(res);	
						this.mv = res.result.mvs;
						this.count = res.result.mvCount;
						for (let i = 0; i < this.mv.length; i++) {
							let min = parseInt(this.mv[i].duration / 1000 / 60);
							let sec = parseInt(this.mv[i].duration / 1000 % 60);
							// console.log(min+":"+sec);
							if (min < 10) {
								min = "0" + min
							};
							if (sec < 10) {
								sec = "0" + sec
							};
							this.mv[i].duration = `${min}:${sec}`;
						}
					}
				})
			}
		},
		created() {
			request({
				url: "/search",
				method: "get",
				params: {
					keywords: this.$route.query.q,
					type: 1,
					limit: 20,
					offset: (this.page - 1) * 30,

				}
			}).then(res => {
				// console.log(res)
				this.songList = res.result.songs;
				//计算歌曲时间
				for (let i = 0; i < this.songList.length; i++) {
					let min = parseInt(this.songList[i].duration / 1000 / 60);
					let sec = parseInt(this.songList[i].duration / 1000 % 60);
					// console.log(min+":"+sec);
					if (min < 10) {
						min = "0" + min
					};
					if (sec < 10) {
						sec = "0" + sec
					};
					this.songList[i].duration = `${min}:${sec}`;
					this.count = res.result.songCount
				}
			})
		},
		methods: {
			playMusic(id) {
				request({
					url: "/song/url",
					method: "get",
					params: {
						id
					}
				}).then(res => {
					// console.log(res);
					let url = res.data[0].url;
					this.$parent.musicUrl = url
				})
			},
			toplaylist(id){
				// this.$router.push('/playlist?q='+id);
				this.$router.push(`/playlist?q=${id}`);
			},
			toMV(id){
				this.$router.push('/mv?q='+id)
			}
		}

	}
</script>

<style>

</style>
